<script setup lang="ts">
import { ref } from 'vue'
import Son from './Son.vue'
const money = ref(100)

// v-model指令 是 :value + @input自定义事件实现的
const cut = (v: number) => {
  money.value = v
}
// v-model指令在组件上使用
// 在vue2中 子组件内部接收value属性, 发布input自定义事件,那么在父组件中就可以使用v-model
// 在vue3中
// 1.子组件内部接收是 modelValue属性,
// 2 发布的自定义事件 update:modelValue 那么在父组件中就可以使用v-model
// 其实在vue3环境下, 在组件上使用v-model="属性"   其实是一个简写 完整写法 是 v-model:modelValue="属性"
</script>
<template>
  <div style="border: 1px solid #000; padding: 20px">
    我是父组件
    <!-- <Son :money="money" @cut="cut"></Son> -->
    <!-- <Son :value="money" @input="cut"></Son> -->
    <Son v-model="money"></Son>
    <Son v-model:modelValue="money"></Son>
  </div>
</template>

<style scoped></style>
